<template>
  <div>
    <span style="font-size: 30px;">养殖信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Sets">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          品种：<span style="font-weight: bold;">{{ form.farmingVariety }} 
          </span> <br><br><br>
          饲养天数：<span style="font-weight: bold;">{{ form.farmingDay }} 天
          </span> <br><br><br>
          饲养负责人：<span style="font-weight: bold;">{{ form.farmingHead }}
          </span> 
        </el-aside>
        <el-main>
          来源：<span style="font-weight: bold;">{{ form.farmingSource }} 
          </span> <br><br><br>
          饲养品牌：<span style="font-weight: bold;">{{ form.farmingFeed }} 
          </span> <br><br><br>
          出栏日期：<span style="font-weight: bold;">{{ form.farmingTime }} 
          </span> 
        </el-main>      
     </el-container>
  </div>
  <!-- 养殖 -->
  <el-dialog v-model="dialogForm" title="养殖信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="品种：">
        <el-input v-model="form.farmingVariety" />
      </el-form-item>
      <el-form-item label="来源：">
        <el-input v-model="form.farmingSource" />
      </el-form-item>
      <el-form-item label="饲养天数：">
        <el-input v-model="form.farmingDay" />
      </el-form-item>
      <el-form-item label="饲养品牌：">
        <el-input v-model="form.farmingFeed" />
      </el-form-item>
      <el-form-item label="饲养负责人：">
        <el-input v-model="form.farmingHead" />
      </el-form-item>
      <el-form-item label="出栏日期：">
        <el-date-picker v-model="form.farmingTime" type="date" 
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="Create(form.farmingId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!--免疫--> <br>
  <div>
    <span style="font-size: 30px;">保健信息</span>&nbsp;
    <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="News()">新增行</el-button>
  </div>
  <table>
    <tr>
      <div style="float: left;margin-left: 30px;">
        <span style="font-size: 18px;">饲养天数</span><br>
      </div>
      <div style="float: left;margin-left: 140px;">
        <span style="font-size: 18px;">保健方式</span><br>
      </div>
      <div style="float: left;margin-left: 140px;">
        <span style="font-size: 18px;">保健方法</span><br>
      </div>
      <div style="float: left;margin-left: 140px;">
        <span style="font-size: 18px;" >
          操作</span><br>
      </div>
    </tr>
    <!-- 保健列表 -->
    <tr v-for="item in getProvincce" :key="item.healthId">
      <div style="float: left;margin-left: 30px;">
        <span style="font-size: 18px;">{{ item.healthDay }}</span><br>
      </div>
      <div style="float: left;margin-left: 190px;">
        <span style="font-size: 18px;">{{ item.healthWay }}</span><br>
      </div>
      <div style="float: left;margin-left: 140px;">
        <span style="font-size: 18px;">{{ item.healthMethods }}</span><br>
      </div>
      <div style="float: left;margin-left: 140px;">
        <el-link type="primary" style="font-size: 18px;" v-if="item.healthId!=0"
        @click="Amend(item.healthId)">
          修改</el-link> &nbsp;&nbsp;&nbsp;&nbsp;
        <el-link type="danger" style="font-size: 18px;" v-if="item.healthId!=0"
        @click="Cancel(item.healthId)" >
          删除</el-link>
      </div>
    </tr>
    <!-- 保健新增、修改 -->
    <tr>
      <div v-if="reast.key" >
        <el-form-item style="float: left;margin-left: 20px;">
          <el-input v-model="reast.healthDay" />
        </el-form-item>
        <el-form-item  style="float: left;margin-left: 20px;">
          <el-input v-model="reast.healthWay" />
        </el-form-item>
        <el-form-item style="float: left;margin-left: 20px;">
          <el-input v-model="reast.healthMethods" />
        </el-form-item>
        <el-form-item style="float: left;margin-left: 20px;">
          <el-link type="primary" style="font-size: 18px;" v-if="reast.healthId!=0"
            @click="BCreate(reast.healthId)">修改</el-link>
          <el-link type="primary" style="font-size: 18px;" v-if="reast.healthId==0"
            @click="BCreate(reast.healthId)">
              保存</el-link> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link type="danger" style="font-size: 18px;" v-if="reast.healthId==0" 
            @click="Cancel(reast.healthId)" >
              取消</el-link>
        </el-form-item>
      </div>
    </tr> 
  </table><br>
  <!-- 动检证 -->
  <div>
    <span style="font-size: 30px;">动检证</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="from.Image"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddD"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div><br>
  <!-- 企业信息 -->
   <div>
    <span style="font-size: 30px;">企业信息</span>&nbsp;
     <el-button style="width: 90px;height: 40px;font-size: 15px;" @click="Setup">设置</el-button>
     <br>
     <el-container>
        <el-aside ><br>
          养殖场：<span style="font-weight: bold;">{{ business.businessFarms }} 
          </span> <br><br><br>
          存栏数量：<span style="font-weight: bold;">{{ business.businessNumber }} 天
          </span> <br><br><br>
        </el-aside>
        <el-main>
          负责人：<span style="font-weight: bold;">{{ business.businessName }} 
          </span> <br><br><br> 
        </el-main>      
     </el-container>
   </div>
   <!-- 企业信息 -->
   <el-dialog v-model="Enterprise" title="企业信息" width="566">
    <el-form :model="form" label-width="auto">
      <el-form-item label="养殖场：">
        <el-input v-model="business.businessFarms" />
      </el-form-item>
      <el-form-item label="负责人：">
        <el-input v-model="business.businessName" />
      </el-form-item>
      <el-form-item label="存栏数量(只)：">
        <el-input v-model="business.businessNumber" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="QCreate(business.businessId)" type="primary">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 企业照片 -->
  <div>
    <span style="font-size: 28px;">企业照片</span>&nbsp;
    <el-upload
      class="avatar-uploader"
      v-model:file-list="from.ImageQ"
      action="http://localhost:55799/api/Trace/UpdateFile"
      list-type="picture-card"
      :on-success="AddQ"
      :on-remove="handleRemove">
      <el-icon><Plus /></el-icon>
    </el-upload>    
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const route=useRoute()
const form=reactive({
  //溯源Id
  traceabilityId:route.query.traceabilityId,
  farmingId:'',
  farmingVariety:'',
  farmingSource:'',
  farmingDay:'',
  farmingFeed:'',
  farmingHead:'',
  farmingTime:''
})

const dialogForm = ref(false)
const Sets=()=>{
  dialogForm.value=true
}
//养殖添加/反填    动检图详情
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Create=(row:any)=>{
  if(row==0){
    axios.post(`Trace/AddFarming`,form).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        dialogForm.value=false
      }else{
        ElMessage.error('添加失败')
      }
    })
  }else{
    axios.get('Trace/GetFarming', {
      params: {
        id:form.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      form.farmingId=ret.data[0].farmingId
      form.farmingVariety=ret.data[0].farmingVariety
      form.farmingSource=ret.data[0].farmingSource
      form.farmingDay=ret.data[0].farmingDay
      form.farmingFeed=ret.data[0].farmingFeed
      form.farmingHead=ret.data[0].farmingHead
      form.farmingTime=(ret.data[0].farmingTime).substring(0,10)
      //动检图反填
      DBackImge()
    })
  }
}
//钩子
onMounted(()=>{
  Create(form)
  //保健列表
  GetHealth()
  //企业
  QCreate(business)
})
//保健所需字段
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const reast:any=reactive({
  key: 0,
  healthDay: '',
  healthWay:'',
  healthMethods:'',
  healthId:0,
  traceabilityId:route.query.traceabilityId,
})
// 新增行
const News=()=>{
  reast.key=1
}//取消/删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Cancel = (row:any) => {
  if(row==0){
    reast.key=0
  }else{
    axios.delete('Trace/DeleteHealth', {
      params: {
        id:row
      }
    }).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('删除成功')
        GetHealth()
      }else{
        ElMessage.error('删除失败')
      }
    })
  }
}
//保健添加/修改
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const BCreate=(row:any)=>{
  if(row==0){
    axios.post(`Trace/AddHealth`,reast).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        reast.key=0;
        GetHealth()
        }else{
        ElMessage.error('添加失败')
        }
    })
  }else{
    axios.post(`Trace/UpdateHealth`,reast).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('修改成功')
        reast.key=0
        GetHealth()
      }else{
        ElMessage.error('修改失败')
      }
    })
  }
}
//保健反填
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Amend=(healthId:any)=>{
  reast.key=1
  //反填
  axios.get('Trace/GetAllHealth', {
      params: {
        id:healthId
      }
    }).then((ret) => {
      console.log(ret.data)
      reast.healthDay=ret.data.healthDay
      reast.healthWay=ret.data.healthWay
      reast.healthMethods=ret.data.healthMethods
      reast.healthId=ret.data.healthId
    })
}
//保健显示列表
const getProvincce=ref()
const GetHealth=(()=>{
  axios.get('Trace/GetHealth', {
    params: {
      id:form.traceabilityId
    }
  }).then((ret) => {
    console.log(ret.data,)
    getProvincce.value=ret.data
  })

})
const from=reactive({
  Image:[],
  ImageQ:[]
})
//图片
import { Plus } from '@element-plus/icons-vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleRemove= (uploadFile:any) => {
  console.log(uploadFile)
}
//动检图片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddD=(Imge:any)=>{
  Imge='http://localhost:55799/Imge/'+Imge
  from.Image=Imge
  console.log(from);
  axios.post(`Trace/AddPhoto`,{
    photoImge:from.Image,
    farmingId:form.farmingId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('添加成功')
    }else{
      ElMessage.error('添加失败')
    }
  })
}
//动检图片反填
const DBackImge=()=>{
  axios.get('Trace/GetDPhoto', {
    params: {
      id:form.farmingId
    }
  }).then((ret) => {
    console.log(ret.data)
    from.Image = ret.data
    console.log(from.Image);
  })
}
//企业字段
const business=reactive({
  businessId:'',
  businessFarms:'',
  businessName:'',
  businessNumber:'',
  //溯源Id
  traceabilityId:route.query.traceabilityId,
})
const Enterprise=ref(false)
//企业设置
const Setup=()=>{
  Enterprise.value=true
}
//企业添加/显示
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const QCreate=(row:any)=>{
  if(row==0){
    axios.post(`Trace/AddBusiness`,business).then((ret) => {
      console.log(ret.data)
      if(ret.data>0){
        ElMessage.success('添加成功')
        Enterprise.value=false
      }else{
        ElMessage.error('添加失败')
      }
    })
  }else{
    axios.get('Trace/GetBusiness', {
      params: {
        id:business.traceabilityId
      }
    }).then((ret) => {
      console.log(ret.data)
      business.businessId=ret.data[0].businessId
      business.businessName=ret.data[0].businessName
      business.businessNumber=ret.data[0].businessNumber
      business.businessFarms=ret.data[0].businessFarms
      localStorage.setItem('businessId',business.businessId)
      //企业图片详情
      QBackImge()
    })
  }
}
//企业照片
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AddQ=(ImageQ:any)=>{
  ImageQ='http://localhost:55799/Imge/'+ImageQ
  from.ImageQ=ImageQ
  axios.post(`Trace/AddPhoto`,{
    photoImge:from.ImageQ,
    businessId:business.businessId
  }).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('企业照片添加成功')
    }else{
      ElMessage.error('企业照片添加失败')
    }
  })
}
//企业图片详情
const QBackImge=()=>{
  axios.get('Trace/GetQPhoto', {
    params: {
      id:business.businessId
    }
  }).then((ret) => {
    console.log(ret.data)
    from.ImageQ = ret.data
  })
}
</script>

<style scoped>

</style>